<template>
  <div>


    <!-- 员工信息展示 -->
    <el-descriptions
        class="my-info-descriptions"
        v-for="employee in pages"
        :key="employee.employeeId"
        :column="3"
        border
    >
      <!-- 基本信息 -->
      <el-descriptions-item class="my-info-item">
        <template slot="label">
          <i class="el-icon-user"></i>
          员工ID
        </template>
        <span class="my-info-highlight">{{ employee.employeeId || "未知" }}</span>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          员工号
        </template>
        <div>
          <template v-if="!employee.isEditing">
            {{ employee.employeeNo || "未知" }}
          </template>
          <el-input
              v-else
              v-model="employee.employeeNo"
              placeholder="请输入员工号"
              size="small"
          ></el-input>
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          姓名
        </template>
        <div>
          <template v-if="!employee.isEditing">
            {{ employee.employeeName || "未知" }}
          </template>
          <el-input
              v-else
              v-model="employee.employeeName"
              placeholder="请输入姓名"
              size="small"
          ></el-input>
        </div>
      </el-descriptions-item>

      <!-- 联系信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        <div>
          <template v-if="!employee.isEditing">
            {{ employee.employeePhone || "未知" }}
          </template>
          <el-input
              v-else
              v-model="employee.employeePhone"
              placeholder="请输入手机号"
              size="small"
          ></el-input>
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-message"></i>
          邮箱
        </template>
        <div>
          <template v-if="!employee.isEditing">
            {{ employee.email || "未知" }}
          </template>
          <el-input
              v-else
              v-model="employee.email"
              placeholder="请输入邮箱"
              size="small"
          ></el-input>
        </div>
      </el-descriptions-item>

      <!-- 身份信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          账号
        </template>
        <div>
          <template v-if="!employee.isEditing">
            {{ employee.account || "未知" }}
          </template>
          <el-input
              v-else
              v-model="employee.account"
              placeholder="请输入账号"
              size="small"
          ></el-input>
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-lock"></i>
          密码
        </template>
        <div class="password-container">
          <span class="password-text">{{
              showPassword ? employee.password : "********"
            }}</span>
          <i
              class="password-toggle"
              :class="showPassword ? 'el-icon-view' : 'el-icon-view'"
              @click="showPassword = !showPassword"
          ></i>
        </div>
      </el-descriptions-item>

      <!-- 个人信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-male"></i>
          性别
        </template>
        <div>
          <template v-if="!employee.isEditing">
            {{ formatGender(employee.gender) }}
          </template>
          <el-select
              v-else
              v-model="employee.gender"
              placeholder="请选择性别"
              size="small"
          >
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-time"></i>
          出生日期
        </template>
        <div>
          <template v-if="!employee.isEditing">
            {{ formatDate(employee.birthDate) }}
          </template>
          <el-date-picker
              v-else
              v-model="employee.birthDate"
              type="date"
              placeholder="选择日期"
              size="small"
              style="width: 100%;"
          ></el-date-picker>
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-time"></i>
          入职日期
        </template>
        <div>
          <template v-if="!employee.isEditing">
            {{ formatDate(employee.hireDate) }}
          </template>
          <el-date-picker
              v-else
              v-model="employee.hireDate"
              type="date"
              placeholder="选择日期"
              size="small"
              style="width: 100%;"
          ></el-date-picker>
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-management"></i>
          所属部门
        </template>
        <div>
          <template v-if="!employee.isEditing">
            <el-tag class="my-info-tag" size="small">
              {{ employee.departmentName || "加载中" }}
            </el-tag>
          </template>
          <el-select
              v-else
              v-model="employee.departmentName"
              placeholder="请选择部门"
              size="small"
          >
            <el-option label="技术部" value="技术部"></el-option>
            <el-option label="市场部" value="市场部"></el-option>
            <el-option label="人事部" value="人事部"></el-option>
          </el-select>
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-suitcase"></i>
          职位
        </template>
        <div>
          <template v-if="!employee.isEditing">
            {{ employee.position || "未知" }}
          </template>
          <el-input
              v-else
              v-model="employee.position"
              placeholder="请输入职位"
              size="small"
          ></el-input>
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          职员等级
        </template>
        <div>
          <template v-if="!employee.isEditing">
            <el-tag class="my-info-tag" size="small">{{
                formatRole(employee.role)
              }}</el-tag>
          </template>
          <el-select
              v-else
              v-model="employee.role"
              placeholder="请选择职员等级"
              size="small"
          >
            <el-option label="普通员工" value="普通员工"></el-option>
            <el-option label="主管" value="主管"></el-option>
            <el-option label="经理" value="经理"></el-option>
          </el-select>
        </div>
      </el-descriptions-item>

      <!-- 薪资和假期信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-coin"></i>
          薪资级别
        </template>
        <div>
          <template v-if="!employee.isEditing">
            {{ formatSalaryLevel(employee.currentSalaryLevel) }}
          </template>
          <el-input
              v-else
              v-model="employee.currentSalaryLevel"
              placeholder="请输入薪资级别"
              size="small"
          ></el-input>
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-date"></i>
          剩余年假
        </template>
        <div>
          <template v-if="!employee.isEditing">
            {{ formatAnnualLeave(employee.remainingAnnualLeave) }}
          </template>
          <el-input
              v-else
              v-model="employee.remainingAnnualLeave"
              placeholder="请输入剩余年假"
              size="small"
          ></el-input>
        </div>
      </el-descriptions-item>

      <!-- 状态信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-circle-check"></i>
          在职状态
        </template>
        <div>
          <template v-if="!employee.isEditing">
            <el-tag
                class="my-info-tag"
                :type="employee.isActive ? 'success' : 'danger'"
                size="small"
            >
              {{ formatActiveStatus(employee.isActive) }}
            </el-tag>
          </template>
          <el-select
              v-else
              v-model="employee.isActive"
              placeholder="请选择在职状态"
              size="small"
          >
            <el-option label="在职" :value="true"></el-option>
            <el-option label="离职" :value="false"></el-option>
          </el-select>
        </div>
      </el-descriptions-item>

      <!-- 备注信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-edit"></i>
          备注
        </template>
        <div>
          <template v-if="!employee.isEditing">
            <span>{{ employee.comments || '无' }}</span>
          </template>
          <div v-else>
            <el-input
                type="textarea"
                v-model="employee.comments"
                placeholder="请输入备注"
                size="small"
                :rows="2"
            ></el-input>
          </div>
        </div>
      </el-descriptions-item>

      <!-- 操作按钮 -->
      <el-descriptions-item :span="3" class="full-width-button-item">
        <div class="button-container" style="display: flex; justify-content: space-between;">
          <el-button
              class="my-info-button"
              type="primary"
              size="medium"
              @click="employee.isEditing ? UpdateEmployee(employee) : toggleEdit(employee)"
          >
            <i class="el-icon-edit"></i> {{ employee.isEditing ? "保存" : "编辑" }}
          </el-button>
          <el-button
              class="my-info-button"
              :type="employee.isEditing ? 'text' : 'warning'"
              size="medium"
              @click="employee.isEditing ? cancelEdit(employee) : goBack()"
          >
            <i class="el-icon-edit"></i> {{ employee.isEditing ? "取消" : "返回" }}
          </el-button>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script src="../../script/employee/EmployeeInfo.js"></script>